<template>
  <div v-if="taskInfo"  id="task-container">
    <div class="crumb">
      <crumb/>
      <div class="main">
        <div class="top-box">
          <div class="left-box">
            <span class="t1">{{taskInfo.caseTitle}}</span>
            <span class="t2">当前环节: {{taskInfo.linkName}}</span>
          </div>
          <span class="right" @click="bgShow = true">背景介绍</span>
        </div>
        <div class="main-box">
          <task-box
            :training-name="item.trainingName"
            :status="parseInt(item.finishedFlag)"
            :score="parseInt(item.score)"
            :stu-node-case-id="item.stuMNodeCaseId"
            :stu-task-case-id="item.stuMTaskCaseId"
            :subject-type="parseInt(item.subjectType)"
            :training-id="item.trainingId"
            v-for="item of taskInfo.taskList"
            :key="item.id"></task-box>
        </div>
      </div>
    </div>
    <background
      :bg-list="taskInfo.caseBgList"
      @close="bgShow = false"
      :dialog-visible="bgShow"></background>
  </div>
</template>

<script>
import taskBox from './components/taskList/taskBox'
import { getTaskInfo } from '@/api/student/training/multiple'
import background from './components/background'
export default {
  name: 'taskList',
  data () {
    return {
      resourceCaseId: null,
      taskInfo: null,
      bgShow: false
    }
  },
  methods: {
    async fetchTaskInfo () {
      let res = await getTaskInfo({
        resourceCaseId: this.resourceCaseId
      })
      if (!res) return
      this.taskInfo = res
    }
  },
  created () {
    this.resourceCaseId = this.$route.query.resourceCaseId
    this.fetchTaskInfo()
  },
  components: {
    taskBox, background
  }
}
</script>

<style scoped lang="scss">
  #task-container{
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    .crumb{
      width: 1200px;
    }
    .main{
      width: 1200px;
      height: 80vh;
      background-color: white;
      box-sizing: border-box;
      padding: 10px;
      border: solid 1px #e5e5e5;
      display: flex;
      flex-flow: column nowrap;
      .top-box{
        width: 100%;
        height: 80px;
        display: flex;
        align-items: center;
        background-color: #F5F5F5;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 30px;
        .left-box{
          display: flex;
          flex-flow: column nowrap;
          .t1{
            font-size:24px;
            color:rgba(16,29,55,1);
          }
          .t2{
            color: #FF8643;
            font-size: 14px;
            line-height: 24px;
            margin-left: 20px;
          }
        }
        .right{
          font-size:14px;
          color:rgba(0,156,246,1);
          cursor: pointer;
        }
      }
      .main-box{
        width: 100%;
        overflow-y: auto;
        height: calc(80vh - 75px);
        background-color: #FAFAFA;
        margin-top: 5px;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
      }
    }
  }
</style>
